<template>
	<div class="admin_menu_wrapper">
		<el-row :gutter="16" type="flex">
			<!-- 一级菜单 -->
			<el-col class="item" :span="6">
				<menu-tree v-model="checkedOne" :level="1" :tree-data="menuListData" @hand="handleControlMenu" @refresh="handleRefresh"></menu-tree>
			</el-col>
			<!-- 二级菜单 -->
			<el-col class="item" :span="6" v-if="!!checkedOne || !!checkedTwo || !!checkedThree">
				<menu-tree v-model="checkedTwo" :level="2" :tree-data="menuData1" @hand="handleControlMenu" @refresh="handleRefresh"></menu-tree>
			</el-col>
			<!-- 三级菜单 -->
			<el-col class="item" :span="6" v-if="!!checkedTwo || !!checkedThree">
				<menu-tree v-model="checkedThree" :level="3" :tree-data="menuData2" @hand="handleControlMenu" @refresh="handleRefresh"></menu-tree>
			</el-col>
			<!-- 功能按钮 -->
			<el-col class="item" :span="6" v-if="!!checkedOne || !!checkedTwo || !!checkedThree">
				<menu-tree :level="4" :tree-data="menuData3" @hand="handleControlMenu" @refresh="handleRefresh"></menu-tree>
			</el-col>
		</el-row>
		<menu-form
			v-model="menuFormDialig"
			:level="formLevel"
			:pid="parentId"
			:menu-list-data="menuListData"
			:menu-data="menuData"
			@refresh="handleRefresh"
		></menu-form>
	</div>
</template>

<script>
import menuForm from './form';
import menuTree from './tree';
import { mapActions } from 'vuex';
import { getMenuTree } from '@/api/system/tbSysMenu';
export default {
	components: { menuTree, menuForm },
	data() {
		return {
			checkedOne: '',
			checkedTwo: '',
			checkedThree: '',
			menuListData: [],
			menuData: {},
			formLevel: 1,
			menuFormDialig: false,
			checkedMenuOne: {},
			checkedMenuTwo: {},
			checkedMenuThree: {},
			parentId: '0'
		};
	},
	mounted() {
		this.getMenuListData();
	},
	computed: {
		menuData1() {
			let menuFlatData = this.treeToFlat(this.menuListData);
			let datas = menuFlatData.find((item) => item.id === this.checkedOne);
			return !datas ? [] : datas.childList.filter((item) => item.menuLevel !== '4');
		},
		menuData2() {
			let menuFlatData = this.treeToFlat(this.menuListData);
			let datas = menuFlatData.find((item) => item.id === this.checkedTwo);
			return !datas ? [] : datas.childList.filter((item) => item.menuLevel !== '4');
		},
		menuData3() {
			let datas = null;
			let menuFlatData = this.treeToFlat(this.menuListData);
			if (!!this.checkedThree) {
				datas = menuFlatData.find((item) => item.id === this.checkedThree);
			} else if (!!this.checkedTwo) {
				datas = menuFlatData.find((item) => item.id === this.checkedTwo);
			} else if (!!this.checkedOne) {
				datas = menuFlatData.find((item) => item.id === this.checkedOne);
			} else {
				return [];
			}
			return !datas ? [] : datas.childList.filter((item) => item.menuLevel === '4');
		}
	},
	watch: {
		checkedOne(val) {
			this.checkedTwo = '';
		},
		checkedTwo(val) {
			this.checkedThree = '';
		}
	},
	methods: {
		...mapActions(['getPermissionMenu']),
		//获取菜单列表
		async getMenuListData() {
			let result = await getMenuTree({ pId: 0 }).then((res) => res.data);
			if (result.code === '0') {
				this.menuListData = !result.data ? [] : result.data;
			}
		},

		//操作菜单
		handleControlMenu(level, data) {
			this.menuFormDialig = true;
			if (level === 2) {
				this.parentId = this.checkedOne;
			} else if (level === 3) {
				this.parentId = this.checkedTwo;
			} else if (level === 4) {
				if (!!this.checkedThree) {
					this.parentId = this.checkedThree;
				} else if (!!this.checkedTwo) {
					this.parentId = this.checkedTwo;
				} else if (!!this.checkedOne) {
					this.parentId = this.checkedOne;
				}
			} else {
				this.parentId = '0';
			}
			this.formLevel = level;
			if (!data) {
				this.menuData = {};
			} else {
				this.menuData = { ...data };
			}
		},

		//树形数据扁平化
		treeToFlat(dataSource) {
			let flatArr = [];
			let dataArr = this.$lodash.cloneDeep(dataSource);
			const flatFunction = (arr) => {
				Array.from(arr).forEach((item) => {
					flatArr.push(item);
					!!item.childList && item.childList.length > 0 ? flatFunction(item.childList) : null;
				});
			};
			flatFunction(dataArr);
			return flatArr;
		},

		//刷新数据
		handleRefresh() {
			this.getMenuListData();
			this.getPermissionMenu();
		}
	}
};
</script>
<style lang="scss" scoped>
.admin_menu_wrapper {
	height: 100%;
	padding: 6px;
	overflow: hidden;
	box-sizing: border-box;
	.el-row {
		height: 100%;
	}
}
</style>
